/**
* Created by wl
* 项目管理>持有中-详情页-高管/股东-公司高管编辑信息
*/
<template>
    <div>
        <div class="ca-title">
            <h3>公司高管</h3>
            <div class="el-right" v-show="showBtn">
                <el-button type="primary" @click="save" size="small">保存</el-button>
                <el-button @click="close" size="small">取消</el-button>
            </div>
        </div>
        <el-form ref="itemInfoRule" :model="itemInfo">
            <table class="ca-table ca-m-t-15" :model="itemInfo">
                <tr>
                    <th>高管姓名</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>传真</th>
                    <th width="250px">备注</th>
                    <th><i class="el-icon-circle-plus-outline el-size" @click="addExecutive"></i></th>  
                </tr>
                <tr v-for="(item, index) in itemInfo.itemHoldHighManagerEntities" :key="index">
                    <td>
                        <el-form-item>
                            <el-input type="text" v-model="item.userName" :maxlength="100"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item>
                            <el-select v-model="item.sex" placeholder="请选择">
                                <el-option
                                v-for="(item, index) in sex"
                                :key="index"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item>
                            <el-input type="text" v-model="item.position" :maxlength="100"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item>
                            <el-input type="text" v-model="item.phone" :maxlength="100"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item>
                            <el-input type="text" v-model="item.email" :maxlength="100"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item>
                            <el-input type="text" v-model="item.fax" :maxlength="100"></el-input>
                        </el-form-item>
                    </td>
                    <td class="input-mid"><el-input placeholder="请输入内容" type="textarea" :rows="2" v-model="item.note" :maxlength="3000" resize="none"></el-input></td>
                    <td class="btn-mid" @click="delExecutive(index)">删除</td>
                </tr>
            </table>
        </el-form>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                value: '',
                sex: ['男', '女'],
                executivesList: {
                    email: '', //邮箱
                    fax: '',//传真 ,
                    id: '',//id ,
                    itemId: '',//项目ID ,
                    phone: '',//电话 ,
                    position: '',//职位 ,
                    sex: '',//性别 直接传 : 男 女 ,
                    userName: '',//名字
                    note: '', //备注
                }, //信息列表
                itemInfo: {
                    itemHoldHighManagerEntities: [], //高管信息
                },
            }
        },
        watch: {
        },
        props: {
            showBtn: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            close() {
                this.$emit('close')
            },
            // 添加高管
            addExecutive() {
                this.itemInfo.itemHoldHighManagerEntities.push(Object.assign({}, this.executivesList));
            },
            // 删除高管
            delExecutive(index) {
                let that = this
                this.$confirm('确定要删除此信息吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false,
                }).then(function () {
                    //删除操作
                    that.itemInfo.itemHoldHighManagerEntities.splice(index, 1)
                    that.$message({
                        message: '修改成功！',
                        type: 'success',
                        center: true
                    });
                })
            },
            getInfo() {
                apiHttp(api.CHECK_HIGHMANAGER, {itemId: this.$route.params.itemId}).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.itemInfo.itemHoldHighManagerEntities = ret.data
                    }
                })
            },
            save() {
                for (let i of this.itemInfo.itemHoldHighManagerEntities) {
                    if (i.userName === '') {
                        this.$message({
                            message: '请输入高管名称',
                            type: 'error',
                            center: true
                        });
                        return false;
                    }
                }
                let query = {
                    itemHoldHighManagerEntities: this.itemInfo.itemHoldHighManagerEntities,
                    itemId: this.$route.params.itemId,
                }
                apiHttp(api.EDIT_HIGHMANAGER, query).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success',
                            center: true
                        });
                        this.$emit('save')
                    }
                })
            },
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-size {
    font-size: 30px;
}
.input-mid {
    display: table-cell;
    vertical-align: middle;
}
.btn-min {
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}
table td{
    padding: 5px 5px;
    box-sizing: border-box;
}
</style>